<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: beige;
        }

        .nav {
            height: 44px;
            width: 100%;
            background-color: white;
            border-bottom: 1px solid gainsboro;
            position: relative;
        }

        .nav h4 {
            width: calc(100% - 140px);
            line-height: 44px;
            margin: 0 auto;
            text-align: center;
        }

        .back {
            position: absolute;
            left: 10px;
            line-height: 44px;
        }

        .login {
            position: absolute;
            right: 10px;
            line-height: 44px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <navcom title="首页">
            <span class="back">返回</span>
            <span class="login">登录</span>
        </navcom>
        <navcom title="分类"></navcom>
        <navcom title="购物车">
            <span class="back">返回</span>
        </navcom>
    </div>
</body>
<template id="nav">
    <div class="nav">
        <!-- slot 就是我们的插槽，可以插入一些标签 -->
        <!-- 
            一个 slot 只能插入一个标签，我们选中一个 slot 中被插入的两个或者多个标签
            我们该如何解决实现一个 slot 只能插入一个标签呢？
         -->
        <slot></slot>
        <h4>{{title}}</h4>
        <slot></slot>
    </div>
</template>
<script>
    /*
        在组件中，有些时候需要显示，有些时候不需要显示，或者需要显示的内容不同时
        可以使用插槽，在显示组件的时候，进行插入指定的内容
    */
    const app = Vue.createApp({
        data () {
            return {}
        },
    })
    app.component('navcom', {
        template: '#nav',
        props: {
            title: {
                default: '导航条',
                type: String
            }
        }
    })
    app.mount('#app')
</script>

</html>